<section class="py-6" [ngClass]="['bg' + default, 'text' + contrastInv]">
	<div
		class="container mx-auto flex flex-col items-center justify-center p-4 space-y-8 md:p-10 md:px-24 xl:px-48"
	>
		<h1 class="text-5xl font-bold leading-none text-center">Sign up now</h1>
		<p class="text-xl font-medium text-center">
			At a assumenda quas cum earum ut itaque commodi saepe rem aspernatur quam natus quis
			nihil quod, hic explicabo doloribus magnam neque, exercitationem eius sunt!
		</p>

		<div class="flex flex-col space-y-4 sm:space-y-0 sm:flex-row sm:space-x-8">
			<button
				class="px-8 py-3 text-lg font-semibold rounded"
				[ngClass]="['bg' + primary, 'text' + contrast]"
			>
				Get started
			</button>

			<button
				class="px-8 py-3 text-lg font-normal border rounded"
				[ngClass]="['bg' + defaultInv, 'text' + contrast, 'border' + neutralInv]"
			>
				Learn more
			</button>
		</div>
	</div>
</section>
